<template>
  <el-select
    v-if="type == 'select'"
    v-model="value"
    :multiple="itemProps.multiple || false"
    :collapse-tags="itemProps.multiple || false"
    :teleported="itemProps.teleported === false ? false : true"
    collapse-tags-tooltip
    :filterable="itemProps.filterable"
    :disabled="itemProps.disabled"
    :remote="itemProps.remote"
    :remote-method="itemProps.remoteMethod"
    :style="{ width: itemProps.itemWidth ? itemProps.itemWidth + 'px' : defaultWidth }"
    clearable
    :placeholder="itemProps?.placeholder || '请选择' + itemProps.name"
  >
    <el-option
      v-for="(item, index) in itemProps?.children"
      :key="index"
      :value="item.code"
      :label="itemProps.onlyName ? item.name : item.code + '-' + item.name"
    />
  </el-select>
  <el-cascader
    v-else-if="type == 'cascader'"
    v-model="value"
    :placeholder="itemProps?.placeholder || '请选择' + itemProps.name"
    :style="{ width: itemProps.itemWidth ? itemProps.itemWidth + 'px' : defaultWidth }"
    :disabled="itemProps.disabled"
    :collapse-tags="true"
    :collapse-tags-tooltip="true"
    :props="{ value: 'code', label: 'name', emitPath: false }"
    :show-all-levels="false"
    clearable
    :options="itemProps.children"
    filterable
  />
  <el-date-picker
    v-else-if="type == 'date'"
    v-model="value"
    :style="{ width: itemProps.itemWidth ? itemProps.itemWidth + 'px' : defaultWidth }"
    :type="itemProps.dateType || 'datetime'"
    :disabled="itemProps.disabled"
    clearable
    :value-format="itemProps.dateFormat || 'YYYY-MM-DD HH:mm:ss'"
    :placeholder="itemProps?.placeholder || '请选择时间'"
    :disabled-date="disableDateFunc"
  >
  </el-date-picker>
  <el-date-picker
    v-else-if="type == 'dateRange'"
    v-model="value"
    :style="{ width: itemProps.itemWidth ? itemProps.itemWidth + 'px' : '280px' }"
    clearable
    :disabled="itemProps.disabled"
    :value-format="itemProps.dateFormat || 'YYYY-MM-DD HH:mm:ss'"
    type="daterange"
    range-separator="-"
    :start-placeholder="itemProps?.placeholder || '请选择开始时间'"
    :end-placeholder="itemProps?.placeholder || '请选择结束时间'"
  ></el-date-picker>
  <el-checkbox-group v-else-if="type == 'checkbox'" v-model="value" :disabled="itemProps.disabled">
    <el-checkbox v-for="(item, index) in itemProps.checkboxOptions" :key="index" :label="item.value">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
  <el-checkbox
    v-else-if="type == 'check'"
    v-model="value"
    :style="{ width: itemProps.itemWidth ? itemProps.itemWidth + 'px' : defaultWidth }"
    :true-label="itemProps.trueLabel"
    :false-label="itemProps.falseLabel"
    :disabled="itemProps.disabled"
  >
    {{ itemProps.checkLabel }}
  </el-checkbox>
  <el-radio-group v-else-if="type == 'radio'" v-model="value" :disabled="itemProps.disabled">
    <el-radio v-for="(item, index) in itemProps.radioOptions" :key="index" :label="item.value">{{
      item.label
    }}</el-radio>
  </el-radio-group>
  <el-switch
    v-else-if="type == 'switch'"
    v-model="value"
    :disabled="itemProps.disabled"
    inline-prompt
    :active-text="itemProps.switchActiveText"
    :inactive-text="itemProps.switchOffText"
  />
  <slot v-else-if="type == 'slot'"></slot>
  <el-input
    v-else
    v-model="value"
    :style="{ width: itemProps.itemWidth ? itemProps.itemWidth + 'px' : defaultWidth }"
    :disabled="itemProps.disabled"
    :type="itemProps.textarea ? 'textarea' : 'text'"
    clearable
    :placeholder="itemProps?.placeholder || '请输入' + itemProps.name"
    @input="inputChange"
  >
    <template v-if="itemProps.slot" #suffix>
      <span>{{ itemProps.icon }}</span>
    </template>
  </el-input>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { useProxy } from '@/utils/proxy'
import { debounce } from '@/utils/index'
import cache from '@/plugins/cache'
type TselectOptions = {
  name: string
  code: string | number | boolean
  [key: string]: unknown
}

type TItemProps = {
  placeholder?: string
  children?: Array<TselectOptions>
  name?: string
  key?: string
  disabled?: boolean
  itemWidth?: string
  [key: string]: any
}
const props = defineProps({
  // v-model绑定字段
  itemValue: {
    type: [String, Number, null] as PropType<any>,
    required: true
  },
  // 渲染类型
  type: {
    type: String,
    default: 'input'
  },
  // 渲染项
  itemProps: {
    type: Object as PropType<TItemProps>,
    required: true
  }
})
const { proxy } = useProxy()
const emits = defineEmits(['update:itemValue', 'disableDateFunc'])
const defaultWidth = '180px'
const value = computed({
  get() {
    return props.itemValue
  },
  set(value) {
    if (props.type != 'text') {
      setItemRecord(value)
    }
    emits('update:itemValue', value)
  }
})
const inputChange = debounce(
  (val: string) => {
    setItemRecord(val)
  },
  700,
  false
)
// 处理操作回滚
const setItemRecord = (val: any) => {
  let arr = cache.session.getJSON(proxy.$route.fullPath) || []
  arr.unshift({ type: 'form', key: props.itemProps.key, value: val })
  cache.session.setJSON(proxy.$route.fullPath, arr)
}
/**
 * 处理日期禁用回调
 * @param {date} time 组件选择返回的日期
 */
function disableDateFunc(time: any) {
  let isDisabled
  emits('disableDateFunc', time, (val: any) => {
    isDisabled = val
  })
  return isDisabled
}
</script>
<style lang="scss" scoped>
.el-checkbox-group,
.el-radio-group {
  display: flex;
}
:deep(.el-input) {
  width: 100% !important;
}
</style>
<style>
.el-scrollbar .el-select-dropdown__item.hover {
  background-color: #edf3ff !important;
}
.el-select__tags {
  max-width: 400px !important;
}
</style>
